<template>
  <div class="list-page">
    <slot>
      <div class="empty-box my-3"></div>
    </slot>
    <el-pagination-new v-if="initOver && isPagination" :total="total" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
      :page-sizes="configInfoRe.pageSizes" @current-change="handleCurrentChange" />
  </div>

</template>
<script>

export default {
  emits: ['update:modelValue'],
  props: {
    configInfo: {
      type: Object,
      default: () => {
        return {
          pageSizes: [10, 20, 50], // 入参分页下拉数量
          getAjax: () => {
            return new Promise((rev, rej) => {
              rej({
                msg: '方法参数错误！'
              })
            });
          }
          ,
          otherParams: {}
        }
      }
    },
    isPagination: {
      type: Boolean,
      default: true // true:分页 false:不分页
    }
  },
  computed: {
    configInfoRe () {
      return {
        pageSizes: this.configInfo.pageSizes || [10, 20, 50],
        getAjax: this.configInfo.getAjax,
        otherParams: this.configInfo.otherParams || {}
      }
    }
  },
  watch: {
    configInfo: {
      handler (val) {
        this.handleCurrentChange(1, this.pageInfo.pageSize);
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      total: 0,
      initOver: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  mounted () {
    this.pageInfo.pageSize = this.configInfoRe.pageSizes[0] || 20
    this.initOver = true
    this.getList()
  },
  methods: {
    getList () {
      if (this.configInfoRe.getAjax && this.initOver) {
        this.configInfoRe.getAjax({ ...this.pageInfo, ...(this.configInfoRe.otherParams || {}) }).then(res => {
          this.total = res.total; 
          this.$emit('update:modelValue', { succList: true, ...res })
        }).catch(err => {
          this.$emit('update:modelValue', { succList: false, ...err })
        })
      }
    },
    handleCurrentChange (pageNum, pageSize) {
      this.pageInfo.pageNum = pageNum
      this.pageInfo.pageSize = pageSize
      this.getList()
    },
  }
}
</script>
<style lang="scss" scoped>
:deep(.page-component) {
  background: unset;
}
</style>